@media screen and (max-width: 1920px) {
  .bigCircl {
    width: 45%;
    height: 34%;
  }
  .smallCircl {
    width: 70px;
    height: 70px;
  }
  .outerThree {
    transform: translateX(-50px) translateY(-50%);
  }
  .outerThreePiece {
    -webkit-transform-origin: 50px 50%;
    transform-origin: 9vh 50%;
  }
}
.bigCircl {
  margin: auto;
  width: 98px;
  height: 99px;
  padding: 5px;
  border-radius: 50%;
  border: 6px solid #5bcbf2;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: rotate(90deg);
  box-sizing: initial;
}
.smallCircl {
  border-radius: 50%;
  transform: rotate(-90deg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #fff;
  font-family: fantasy;
  margin-top: 12px;
  margin-left: 13px;
}
.outerThree {
  position: absolute;
  left: 49%;
  top: 55px;
  width: 58px;
  height: 8px;
  -webkit-transform-origin: 65px 50%;
  transform-origin: 21px 43%;
}
.outerThreePiece {
  position: absolute;
  width: 16px;
  height: 7px;
  background: #1fc5ff;
  -webkit-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  border-radius: 10px;
}
html {
  font-size: 20 px;
}
@media only screen and (min-width: 320 px) {
  html {
    font-size: 10 px!important;
  }
}
@media only screen and (min-width: 428 px) {
  html {
    font-size: 26.75 px!important;
  }
}
@media only screen and (min-width: 481 px) {
  html {
    font-size: 30 px!important;
  }
}
@media only screen and (min-width: 569 px) {
  html {
    font-size: 35 px!important;
  }
}
@media only screen and (min-width: 641 px) {
  html {
    font-size: 40 px!important;
  }
}
